<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" inline v-show="showSearch">
      <el-form-item label="人员" prop="userId">
        <user-select v-model="queryForm.userId" placeholder="请选择人员"/>
      </el-form-item>
      <el-form-item label="上线时间" prop="onlineTimeRange">
        <el-date-picker v-model="queryForm.onlineTimeRange"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled-date="disabledDateFunction"/>
      </el-form-item>
      <el-form-item label="下线时间" prop="offlineTimeRange">
        <el-date-picker v-model="queryForm.offlineTimeRange"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled-date="disabledDateFunction"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getAttendRecordList">搜索</el-button>
        <el-button icon="Refresh" @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-tools mb8">
      <div>
        <el-button type="danger"
                   icon="Delete"
                   plain
                   :disabled="deleteBtnDisabled"
                   @click="handleDeleteAttendRecordList"
                   v-hasPermi="['core:attend-record:remove']">删除</el-button>
      </div>
      <div>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getAttendRecordList"/>
      </div>
    </div>

    <el-table :data="recordList"
              ref="recordList"
              v-loading="recordLoading"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection"/>
      <el-table-column align="center" type="index" label="序号" width="80"/>
      <el-table-column align="center" prop="user.userName" label="工号"/>
      <el-table-column align="center" prop="user.nickName" label="姓名"/>
      <el-table-column align="center" prop="user.dept.deptName" label="部门"/>
      <el-table-column align="center" prop="onlineTime" label="上线时间"/>
      <el-table-column align="center" prop="offlineTime" label="下线时间">
        <template #default="{row}">
          <span v-if="row.offlineTime">{{row.offlineTime}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="duration" label="在线时长">
        <template #default="{row}">
          <span v-if="row.duration">{{row.duration}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template #default="{row}">
          <el-button type="primary"
                     link
                     icon="Delete"
                     v-hasPermi="['core:attend-record:remove']"
                     @click="handleDeleteAttendRecord(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="recordTotal"
                v-model:page="queryForm.pageNum"
                v-model:limit="queryForm.pageSize"
                @pagination="getAttendRecordList"/>
  </div>
</template>

<script>
import {getAttendRecordList, deleteAttendRecord} from "@/api/core/attendRecord";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration"
dayjs.extend(duration)

export default {
  name: "index",
  data() {
    return {
      queryForm: {
        userId: '',
        onlineTimeRange: [],
        offlineTimeRange: [],
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      recordLoading: false,
      recordList: [],
      recordTotal: 0,
      deleteBtnDisabled: true
    }
  },
  created() {
    this.getAttendRecordList()
  },
  methods: {
    resetQueryForm() {
      this.queryForm = {
        rtcUserId: '',
        onlineTimeRange: [],
        offlineTimeRange: [],
        pageNum: 1,
        pageSize: 10
      }
      this.getAttendRecordList()
    },
    getAttendRecordList() {
      this.recordLoading = true

      const form = {...this.queryForm}
      if (form.onlineTimeRange && form.onlineTimeRange.length === 2) {
        form.startOnlineTime = form.onlineTimeRange[0]
        form.endOnlineTime = form.onlineTimeRange[1]
      }
      if (form.offlineTimeRange && form.offlineTimeRange.length === 2) {
        form.startOfflineTime = form.offlineTimeRange[0]
        form.endOfflineTime = form.offlineTimeRange[1]
      }
      delete form.onlineTimeRange
      delete form.offlineTimeRange

      getAttendRecordList(form).then(res => {
        const {rows, total} = res

        for (const row of rows) {
          if (row.onlineTime && row.offlineTime) {
            const durationMillisecond = dayjs(row.offlineTime).valueOf() - dayjs(row.onlineTime).valueOf()
            const duration = dayjs.duration(durationMillisecond)

            if (durationMillisecond < 60000) {
              row.duration = duration.format('s[秒]')
            } else if (durationMillisecond === 60000) {
              row.duration = '1分钟'
            } else if (durationMillisecond > 60000 && durationMillisecond < 60 * 60000) {
              // 不足1小时
              row.duration = duration.format('m[分钟]s[秒]')
            } else if (durationMillisecond === 60 * 60000) {
              row.duration = '1小时'
            } else if (durationMillisecond > 60 * 60000 && durationMillisecond < 24 * 60 * 60000) {
              // 不足1天
              row.duration = duration.format('H[小时]m[分钟]s[秒]')
            } else if (durationMillisecond === 24 * 60 * 60000) {
              row.duration = '1天'
            } else {
              row.duration = duration.format('D[天]H[小时]m[分钟]s[秒]')
            }
          }
        }

        this.recordList = rows
        this.recordTotal = total
      }).finally(() => {
        this.recordLoading = false
      })
    },
    deleteAttendRecord(ids) {
      deleteAttendRecord(ids).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getAttendRecordList()
      })
    },
    async handleDeleteAttendRecord(row) {
      await this.$modal.confirm('您确定要删除此条数据吗？')

      const ids = [row.id]
      this.deleteAttendRecord(ids)
    },
    async handleDeleteAttendRecordList() {
      await this.$modal.confirm('您确定要删除勾选的数据吗？')

      const rows = this.$refs.recordList.getSelectionRows()
      const ids = rows.map(item => item.id)
      this.deleteAttendRecord(ids)
    },
    handleSelectionChange(selection) {
      this.deleteBtnDisabled = !selection.length
    },
    disabledDateFunction(date) {
      const paramDate = dayjs(date)
      const currentDate = dayjs()

      currentDate.hour(23)
      currentDate.minute(59)
      currentDate.second(59)

      return paramDate.valueOf() > currentDate
    }
  }
}
</script>

<style scoped>

</style>
